
//调用
$(function () {
    //头部移入
    getTop();
    // 头部输入框
    getText();
    // 导航栏
    getNav();
    //接收列表信息
    getJS();
    //放大镜
    getMf();
    //购物车
    getScroll();
    //减少
    getAdd();
    //增加
    getRemove();
    //购物车
    getGwc();
    //回到顶部
    getScrollS();
})

//头部移入
function getTop() {
    $(".header>.top_right>.shop").mouseenter(function () {
        $(".top_right .cart").show();
    });
    $(".header>.top_right>.shop").mouseleave(function () {
        $(".top_right .cart").hide();
    });
}

// 头部输入框
function getText() {
    $(".main .m_right input").on("focus", function () {
        $(".recommends>a").hide();
    })
    $(".main .m_right input").on("blur", function () {
        $(".recommends>a").show();
    })
}
// 导航栏
function getNav() {
    $(".main #m_bigbox>li").on("click", function () {
        $(this).find(".m_hide").stop().slideToggle().parent().siblings("li").find(".m_hide").stop().slideUp(1)
    });
}

//接收列表信息
function getJS() {
    // console.log(location.search.slice(1).split("=")[1]);
    let id = location.search.slice(1).split("=")[1]

    $.get("../goodsAndShoppingCart/getGoodsInfo.php", { "goodsId": id }, function (data) {
        // console.log(data);
        let str = '';
        str = `
            <div class="d_left">
                <div id="Lock">
                    <div id="mask"></div>
                </div>
                <ul id="MiXi">
                    <li><img src="${data.beiyong1}" alt="" width="100%" height="100%"></li>
                    <li><img src="${data.beiyong2}" alt="" width="100%" height="100%"></li>
                    <li><img src="${data.beiyong3}" alt="" width="100%" height="100%"></li>
                    <li><img src="${data.beiyong4}" alt="" width="100%" height="100%"></li>
                    <li><img src="${data.beiyong5}" alt="" width="100%" height="100%"></li>
                </ul>
                <div id="Xhow"></div>
            </div>
            <div class="d_right">
                <h1 class="name">${data.goodsName}</h1>
                <h2 class="dj">${data.goodsDesc}
                    <div id="get_pan">
                        <p>￥</p><span>${data.goodsPrice}</span>
                        <p>元</p>
                    </div>
                </h2>
                <div class="d_awesome">
                    颜色选择<span>黑色</span>
                </div>
                <div class="d_traman">
                    数量选择
                    <p id="addNum"></p>
                    <span id="Much">1</span>
                    <p id="removeNum"></p>
                </div>
                <div class="serve">
                    <h5>服务说明<span>*满88元包邮</span></h5>
                </div>
            </div>`
        $(".d_top").html(str);
        $(".d_top").on("click", "#MiXi>li", function () {
            $(this).addClass("active").siblings("li").removeClass("active");
            $("#Lock").css("background-image", `url(${$(this).find("img").attr("src")})`);
            $("#Xhow").css("background-image", `url(${$(this).find("img").attr("src")})`);
        })
        //  $("#MiXi>li").eq(0).click(function(){
        //     $(this).addClass("active").siblings("li").removeClass("active");
        //     $("#Lock").css("background-image", `url(${$(this).find("img").attr("src")})`);
        //     $("#Xhow").css("background-image", `url(${$(this).find("img").attr("src")})`);
        //  })

        $("#MiXi>li").eq(0).click()
        let john = '';
        john = `
        <div class="center fot_num">
            <div class="goods_left">您已经选择了
                <span class="goods_name">${data.goodsName}</span>x<span class="goods_num">1</span><br>
            </div>
            <div class="goods_right">
                ￥<span class="get_total">${data.goodsPrice}</span>元
                <span class="get_Gwc">添加到购物车</span>
            </div>
        </div>`
        $(".shopping").html(john);
    }, "json");
}


//放大镜
function getMf() {
    $(".d_top").on("mouseenter", "#Lock", function () {
        $("#mask").css("display", "block");
        $("#Xhow").css("display", "block");
    });
    $(".d_top").on("mouseleave", "#Lock", function () {
        $("#mask").css("display", "none");
        $("#Xhow").css("display", "none");
    });


    $(".d_top").on("mousemove", "#Lock", function (e) {
        let x = e.pageX - $(this).offset().left - $("#mask").width() / 2;
        let y = e.pageY - $(this).offset().top - $("#mask").height() / 2;


        if (x < 0) {
            x = 0
        }
        if (x > $(this).width() - $("#mask").width()) {
            x = $(this).width() - $("#mask").width();
        }

        if (y < 0) {
            y = 0
        }

        if (y > $(this).height() - $("#mask").height()) {
            y = $(this).height() - $("#mask").height();
        }

        $("#mask").css("left", x + 'px');
        $("#mask").css("top", y + 'px');


        $("#Xhow").css("backgroundPositionX", -x * 2 + "px");
        $("#Xhow").css("backgroundPositionY", -y * 2 + "px");

    })


}

//购物车
function getAdd() {
    $(".d_top").on("click", "#addNum", function () {
        let num = $(this).next().html();
        console.log($(this).next());
        num--;
        if (num < 1) {
            num = 1;
        }
        $(this).next().html(num);
        $(".shopping .goods_left .goods_num").html(num);
        let price = parseInt($("#get_pan span").html());
        console.log(price);
        $(".shopping .goods_right .get_total").html(num * price);
        console.log($(".shopping .goods_right .get_total"));
    });
}

function getRemove() {
    $(".d_top").on("click", "#removeNum", function () {
        let num = $(this).prev().html();
        num++;
        if (num > 10) {
            num = 10;
            alert("超出购买量！！！");
        }
        $(this).prev().html(num);
        $(".shopping .goods_left .goods_num").html(num);
        let price = parseInt($("#get_pan span").html());
        // console.log(price);
        $(".shopping .goods_right .get_total").html(num * price);
        // console.log($(".shopping .goods_right .get_total"));
    });
}

//移出去
function getScroll() {
    $(window).on("scroll", function () {
        let h = document.documentElement.scrollTop || document.body.scrollTop;
        if (h > 320 && h < $("#img")[0].offsetTop) {
            $(".shopping").css("position", "fixed");
            $(".shopping").css("left", "0px");
            $(".shopping").css("bottom", "0px");
        } else if (h > $("#img")[0].offsetTop && h < $(".footer")[0].offsetTop) {
            $(".shopping").css("position", "static");
        }
    })
}


//回到顶部
function getScrollS() {
    $(".get_bake .get_Up").on("click", function () {
        $("html,body").animate({  // 让body和html回到顶部
            scrollTop: 0
        })
    })

}
//传参到购物车,把参数携带到详情页
function getGwc() {
    $(".shopping").on("click", ".get_Gwc", function () {
        let id = location.search.slice(1).split("=")[1]
        // let gos = $(this).attr("good")
        // // console.log($(this).attr("good"));
        // //把参数携带到详情页
        // location.href = '../html/details.html?good=' + gos
        $.post("../goodsAndShoppingCart/addShoppingCart.php", {
            "vipName": getCookie("username"), "goodsId": id, "goodsCount": $("#Much").html()
        }, function (data) {
            if (data.trim() == '1') {
                alert("添加成功...");
                location.href = '../html/shoppingcart.html?good=' + id
            } else {
                alert("请登录...");
            }
        });
    })
}
